<template>
  <div class="chart">
    <div :id="container" :style="{height: height, width: width}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'EChart',
  props: {
    container: String,
    width: String,
    height: String,
    option: Object,
    arrData: Array
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    arrData (newArrData, oldArrData) {
      const option = this.chart.getOption()
      option.series[0].data = newArrData
      this.chart.setOption(option)
    },
    option(){
      this.chart.setOption(this.option)
    }
  },
  methods: {
    init () {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById(this.container))
      // 绘制图表
      this.chart.setOption(this.option)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
